<!--
 * @Author: AHANG
 * @Date: 2022-07-07 19:59:44
 * @LastEditors: AHANG
 * @LastEditTime: 2022-07-15 18:00:00
 * @Description: 
-->
<template>
  <div class="Info" v-loading="loading">
    <div class="header">
      <export-excle :allData="allData" :tableData="tableData"></export-excle>
      <el-button
        class="btn"
        type="primary"
        size="default"
        @click="dialogVisible = true"
      >
        新增书籍
      </el-button>
      <el-input v-model="search" placeholder="作者 /书名 /地址搜索" />
    </div>
    <!-- .filter(
            (data) => !search || data.author.toLowerCase().includes(search.toLowerCase())
          ) -->
    <el-row class="tac">
      <el-table
        id="table"
        height="400"
        @row-click="test"
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column prop="id" label="序号" width="80"></el-table-column>
        <el-table-column prop="author" label="作者" width="180">
        </el-table-column>
        <el-table-column prop="press" label="地址" width="180">
        </el-table-column>
        <el-table-column prop="bookName" label="书名" width="180">
        </el-table-column>
        <el-table-column
          prop="date"
          label="时间"
          width="180"
          :formatter="formatDate"
        >
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100">
        </el-table-column>
        <el-table-column prop="number" label="数量" width="100">
        </el-table-column>
        <el-table-column width="190" fixed="right" label="操作">
          <el-button type="danger" size="default" @click="deleteBook">
            删除
          </el-button>
          <el-button type="info" size="default" @click="dialogVisible2 = true"
            >修改</el-button
          >
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          @size-change="sizeChange"
          @current-change="currentChange"
          :current-page="page"
          :page-size="size"
          :page-sizes="pageSizes"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- <h2 @click="deleteBook">删除</h2> -->
      <!-- <h2 @click="updateBook">修改</h2> -->
      <!-- <h2 @click="addBook">增加</h2> -->
    </el-row>
    <el-dialog title="新增信息" :visible.sync="dialogVisible" width="30%">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">作者</p>
          <el-input
            v-model="obj2.author"
            placeholder="author"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">地址</p>
          <el-input
            v-model="obj2.press"
            placeholder="press"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">书名</p>
          <el-input
            v-model="obj2.name"
            placeholder="bookName"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">时间</p>
          <el-input
            v-model="obj2.date"
            placeholder="date"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">价格</p>
          <el-input
            v-model.number="obj2.price"
            placeholder="price"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">数量</p>
          <el-input
            v-model="obj2.number"
            placeholder="number"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBook"> 确 定 添 加</el-button>
      </span>
    </el-dialog>

    <el-dialog title="修改信息" :visible.sync="dialogVisible2" width="30%">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">作者</p>
          <el-input
            v-model="obj.author"
            placeholder="author"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">地址</p>
          <el-input
            v-model="obj.press"
            placeholder="press"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">书名</p>
          <el-input
            v-model="obj.name"
            placeholder="bookName"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">时间</p>
          <el-input
            v-model="obj.date"
            placeholder="date"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <p class="inputText">价格</p>
          <el-input
            v-model.number="obj.price"
            placeholder="price"
            size="normal"
          ></el-input>
        </el-col>
        <el-col :span="12" :offset="0">
          <p class="inputText">数量</p>
          <el-input
            v-model.number="obj.number"
            placeholder="number"
            size="normal"
          ></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="updateBook"> 确 定 修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import exportExcle from "../src/components/exportExcle/exportExcle.vue";
import dayjs from "dayjs";
import { searchBook, deleteBook, updateBook, addBook } from "@/api";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Info",
  data() {
    return {
      search: "",
      loading: false,
      date: "",
      dialogVisible: false,
      dialogVisible2: false,
      tableData: [],
      allData: [],
      newData: [],
      page: 1, //第几页
      size: 5, //一页多少条
      total: 0, //总条目数
      pageSizes: [5, 10, 20, 50, 100, 200, 300, 400, 500, 1000], //可选择的一页多少条
      id: 1,
      obj: {
        id: 0,
        author: "",
        press: "",
        name: "",
        date: null,
        price: 0,
        number: 0,
      },
      obj2: {
        author: "",
        press: "",
        name: "",
        date: null,
        price: 0,
        number: 0,
      },
    };
  },
  created() {
    this.obj.date = dayjs().format("YYYY-MM-DD HH:mm:ss");
    this.obj2.date = dayjs().format("YYYY-MM-DD HH:mm:ss");
    console.log(this.obj.date);
    this.get();
  },
  components: {
    exportExcle,
  },
  methods: {
    //获取表格数据，自行分页(slice)
    getTabelData() {
      // console.log("ok");
      //allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.allData.length;
    },

    //获取表格数据，自行分页（splice）
    // getTabelData2() {
    //   let data = JSON.parse(JSON.stringify(this.allData));
    //   this.tableData = data.splice((this.page - 1) * this.size, this.size);
    //   this.total = this.allData.length;
    // },

    //page改变时的回调函数，参数为当前页码
    currentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTabelData();
    },
    //size改变时回调的函数，参数为当前的size
    sizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条数据", val);
      this.size = val;
      this.page = 1;
      this.getTabelData();
    },

    //方法区
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return (
        dt.getFullYear() +
        "-" +
        (dt.getMonth() + 1) +
        "-" +
        dt.getDate() +
        " " +
        dt.getHours() +
        ":" +
        dt.getMinutes() +
        ":" +
        dt.getSeconds()
      );
    },
    test(row) {
      // console.log(row);
      this.id = row.id;
      this.obj.id = row.id;
      this.obj.author = row.author; //姓名
      this.obj.press = row.press; //地址
      this.obj.name = row.bookName; //书名
      this.obj.price = row.price; //价格
      this.obj.number = row.number; //数量
      // console.log(this.obj.id);
    },
    get() {
      searchBook().then((res) => {
        this.allData = res.data.data;
        this.loading = false;
        this.getTabelData();
      });
    },
    deleteBook() {
      this.loading = true;
      setTimeout(() => {
        deleteBook(this.id).then((res) => {
          console.log(res.data.msg);
          this.isMessage(res.data.msg, "success");
          this.get();
        });
      }, 0);
    },
    updateBook() {
      this.loading = true;
      updateBook(this.obj).then((res) => {
        console.log(res.data);
        this.dialogVisible2 = false;
        this.isMessage(res.data.msg, "success");
      });
      this.get();
    },
    addBook() {
      this.loading = true;
      if (
        this.obj2.author != "" &&
        this.obj2.press != "" &&
        this.obj2.name != ""
      ) {
        addBook(this.obj2).then((res) => {
          console.log(res.data.msg);
          if (!res.data.NO) {
            this.isMessage(res.data.msg, "error");
          }
          if (res.data.NO) {
            this.isMessage(res.data.msg, "success");
            this.dialogVisible = false;
            this.get();
          }
        });
      } else {
        this.isMessage("填写完整再添加", "warning");
      }
      this.get();
    },
  },
  watch: {
    search: {
      handler(newV) {
        this.newData = this.tableData.filter(
          (fruit) =>
            fruit.author.indexOf(newV) !== -1 ||
            fruit.press.indexOf(newV) !== -1 ||
            fruit.bookName.indexOf(newV) !== -1
        );
        this.tableData = this.newData;
        if (!newV) {
          this.get();
        }
      },
    },
  },
};
</script>

<style scoped>
.btn {
  margin: 10px;
}
.header {
  display: flex;
  align-items: center;
}
.header > .el-input {
  width: 15%;
}
.el-table {
  overflow-y: auto;
}
.el-table::before {
  height: 0;
}
.fenye {
  margin: 20px;
  display: flex;
  flex-direction: row-reverse;
}
.inputText {
  font-weight: bold;
  color: #999;
  margin: 10px 0px;
}
</style>